<template>
    <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp" :style="{height: height}">
      <ul class="list_a wenzi" v-for="(item,index) in listData">
        <li>
          <i>{{index + 1}}</i>
          <div>
            <div class="item_c">
              <p>{{item.title}}</p>
            </div>
          </div>
        </li>
      </ul>
    </vue-seamless-scroll>
</template>

<script>
export default {
  props: {
    height: {
      type: String,
      default: '155px'
    }
  },
  data () {
    return {
      listData: [{
        'title': '韶关市传统优势产业转型升级现场会在韶钢召开',
        'date': '2017-12-16'
      }, {
        'title': '韶关市加快培育支柱产业和新兴产业推动产业转型升级',
        'date': '2017-12-16'
      }, {
        'title': '韶关市人民政府关于印发“八大产业”《三年行动计划》',
        'date': '2017-12-16'
      }, {
        'title': '韶关市加快培育支柱产业和新兴产业推动产业转型升级',
        'date': '2017-12-16'
      }, {
        'title': '韶关市传统优势产业转型升级现场会在韶钢召开1',
        'date': '2017-12-16'
      }, {
        'title': '韶关市传统优势产业转型升级现场会在韶钢召开2',
        'date': '2017-12-16'
      }, {
        'title': '韶关市传统优势产业转型升级现场会在韶钢召开3',
        'date': '2017-12-16'
      }, {
        'title': '韶关市传统优势产业转型升级现场会在韶钢召开4',
        'date': '2017-12-16'
      }]
    }
  },
  computed: {
    optionHover () {
      return {
        singleHeight: 31,
        waitTime: 2500
      }
    }
  }
}
</script>

<style lang="less" scoped>
.seamless-warp {
  height: 155px;
  overflow: hidden;
}

.list_a li {
  position: relative;
  margin-bottom: 10px;
}

.list_a li>i {
  margin-top: 5px;
  width: 23px;
  height: 20px;
  display: block;
  float: left;
  color: #00d5ff;
  font-size: 14px;
  text-align: center;
  font-style: normal;
  line-height: 20px;
  background: url(~@/assets/images/seamless/num_bg.png) no-repeat center;
}

.list_a.wenzi li>i {
  margin-top: 0px;
}

.list_a li>div {
  margin-left: 30px;
}

.list_a .item_c p{
  margin: 0;
}
</style>